﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>watch和computed</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>watch和computed</h1><br/>

<div id="app">
    {{name}}
    <p>
        computed计算属性不是方法，方法不会有缓存，computed会根据依赖(vue管理的数据，可以响应式变化)的属性进行缓存
    </p>
    <p>两部分组成有get和set，不能只写set,一般情况下通过js赋值影响其他或者表单元素设置值的时候会调用set方法</p>
    <p>
        全选<input type="checkbox" v-model="checkAll"><br/>
        <input type="checkbox" v-for="pro in products" v-model="pro.isSelected">
    </p>
    <p>
        根据输入框中的内容 算出一个错误信息<br/>
        当给a赋值的时候影响了 错误信息的
        <input type="text" v-model="b">
        {{mm}}
    </p>
</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    Vue.filter('mingchen',(data)=>{//全局过滤器
        return 'abcd'+data;
    })

    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据',
            b:'',
            mm:'',
            msg:'',
            products:[
                {
                    isSelected:true
                },
                {
                    isSelected:true
                }
            ]
        },
        //可以查看api有个$watch是等价的，将来用redener的时候有用
        //异步，并且需要监听就用watch
        //说白了也是一个computed但是用来解决异步操作
        //所以需要使用watch
        watch:{//只有值变化了才会触发 支持异步,其它情况我们更善于使用computed
            b(newVal,oldVal){
                console.log(newVal);
                console.log(oldVal);
                return this.mm = newVal.length<3?'太少':'太多';
            }
        },
        //只要自己依赖的值有变化就会改变
        computed:{
            ajax(){
                setTimeout(()=>{
                    return 'computed不支持异步，因为这里的return是返回给setTimeout不是给计算属性ajax,所以拿到的值为undefined'
                },1000)
            },
            message(){
                return this.b.length<3?'少了':'多了';
            },
            a:{//如果写了set方法，并且val给了别的元素，那当前的a就不会被赋值了
                get(){

                },
                set(val){

                }
            },
            checkAll:{
                get(){//返回什么值 就会赋予给checkAll属性
                    return this.products.every(item=>item.isSelected)
                },
                //不写set的话自己改变了不会影响其它
                set(val){//val是给checkAll赋值的时候就有了
                    this.products.forEach(item=>item.isSelected=val)
                }
            }
        }
    });
</script>

</body>
</html>